<template>
  <div id="app" style="overflow: hidden">
    <!--    <div id="container" class="container">111</div>-->
    <div class="topSearch">
      <div>账号：
        <el-input placeholder="请输入" size="small" style="width: 200px" v-model="params.userId"></el-input>
      </div>
      <div>姓名：
        <el-input placeholder="请输入" size="small" style="width: 200px" v-model="params.userName"></el-input>
      </div>
      <div>手机号：
        <el-input placeholder="请输入" size="small" style="width: 200px" v-model="params.phoneNumber"></el-input>
      </div>
      <div>注册时间：
        <el-date-picker v-model="params.time" size='small' type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="chooseTime">
        </el-date-picker>
      </div>
      <div>状态：
        <el-select style="width: 200px;" size="small" v-model="params.state">
          <el-option value="1" label="正常"></el-option>
          <el-option value="2" label="已禁用"></el-option>
        </el-select>
      </div>
      <div>工种：
        <el-select size="small" style="width: 200px" v-model="params.roleId">
          <el-option v-for="item in talentRole" :value="item.roleId" :label="item.roleName"
                     :key="item.roleId"></el-option>
        </el-select>
      </div>
      <div>
        <el-button size="small" type="primary" style="margin-left: 20px;background-color:#303e9d;" @click="getTalent" icon="el-icon-search">
          查询
        </el-button>
        <el-button size="small" type="info" @click="reset"  icon="el-icon-refresh">重置</el-button>
      </div>
    </div>
    <div class="centerTable">
      <el-button size="small" style="background:#303e9d;border: none;margin-bottom: 10px" type="primary" @click="add"><i class="el-icon-plus"
                                                                                                                         style="margin-right: 5px"></i>新增</el-button>
      <el-table :data="talentData" height="calc(100vh - 250px)"
                border stripe :cell-style="{ 'textAlign': 'center' }"
                :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="userId" label="账号"></el-table-column>
        <el-table-column prop="userName" label="姓名"></el-table-column>
        <el-table-column prop="phoneNumber" label="手机"></el-table-column>
        <el-table-column prop="sex" label="性别" width="80px"></el-table-column>
        <el-table-column prop="score" label="评分" width="80px"></el-table-column>
        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isBanned" active-color="#13ce66"
                       inactive-color="#ff4949"
                       active-value="0"
                       @change="useTalent(scope.row)"
                       inactive-value="1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="roleName" label="岗位"></el-table-column>
        <el-table-column prop="address" label="现居地" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="workYears" label="工作年限" width="80px">
          <template slot-scope="scope">
            <span>{{scope.row.workYears+'年'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="wechatId" label="微信号"></el-table-column>
        <el-table-column prop="orderNum" label="订单总数"></el-table-column>
        <el-table-column prop="idCard" label="身份证号码" width="150px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="certificate" label="证书">
          <template slot-scope="scope">
            <div v-for="item in scope.row.certificateImg">
              <el-image
                  style="width: 50px; height: 50px"
                  ref="preview"
                  :src="'https://'+item"
                  :preview-src-list="['https://'+item]"
              >
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="introduction" label="个人介绍"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div style="display: flex;flex-direction: column">
              <el-link style="color: #303e9d" v-if="authorityList.includes(1405)&&scope.row.state!=1" @click="edit(scope.row)">编辑</el-link>
              <el-link style="color: #303e9d" @click="addExperience(scope.row)" v-if="authorityList.includes(1402)&&scope.row.state==1">更新项目经验</el-link>
              <el-link style="color: #303e9d" @click="deleteData(scope.row)" v-if="authorityList.includes(1403)">删除</el-link>
              <el-link style="color: #303e9d" @click="aduit(scope.row)" v-if="authorityList.includes(1406)&&scope.row.state==0">审核</el-link>
              <el-link style="color: #303e9d" @click="aduit(scope.row)" v-if="authorityList.includes(1404)&&scope.row.state!=0">查看详情</el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding: 20px 0;" align="center" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <div class="components">
      <add-talent ref="addTalent" @addStatus="receiveMessage"></add-talent>
      <aduit-talent ref="aduitTalent" @addStatus="receiveMessage"></aduit-talent>
      <el-dialog :visible.sync="experienceDialog" title="添加项目经历" center width="40%" top="15px">
     <div style="height: 650px;overflow: scroll">
       <div class="content" v-for="(item,index) in projectDetail">
         <el-card class="box-card">
           <div> 开始时间：
             <el-date-picker
                 v-model="item.startTime"
                 type="date"
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd"
                 size="small"
                 placeholder="选择日期"
             >
             </el-date-picker>
             结束时间：
             <el-date-picker
                 v-model="item.endTime"
                 type="date"
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd"
                 size="small"
                 placeholder="选择日期">
             </el-date-picker>
           </div>
           <div style="margin-top: 20px">
             项目名称：
             <el-input style="width: 80%" size="small" v-model="item.projectName"></el-input>
           </div>
           <div style="margin-top: 20px">
             工作内容：
             <el-input style="width: 80%" size="small" type="textarea" v-model="item.content"></el-input>
           </div>
         </el-card>
         <i class="el-icon-delete" style="margin-left: 10px" v-if="projectDetail.length>1&&!item.projectId"
            @click="deleteExperience(index)"></i>
       </div>
       <div>
         <el-link style="color: #303e9d;margin-top: 10px;margin-bottom: 20px" @click="experienceAdd(projectDetail)">
           +添加项目经历
         </el-link>
       </div>
     </div>
        <span slot="footer">
          <el-button style="color: #FFFFFF" @click="submitExperience">新 增</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import addTalent from "./componentDialog/addTalent.vue";
import aduitTalent from "./componentDialog/aduitTalent.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import {MessageBox} from "element-ui";
import quinn from "../../utils/quinn";

export default {
  name: "talentPool",
  components: {
    addTalent,
    aduitTalent,
  },
  data() {
    return {
      params: {
        pageSize: 20,
        pageNumber: 1
      },
      total: 0,
      addUserId: "",
      currentPage: 1,
      experienceDialog: false,
      talentRole: [],
      projectDetail: {},
      talentData: [],
       authorityList: [],
    }
  },
  created() {
    this.getTalent()
    const {authorityList = []} = quinn.getStorage("userDatav3") || store.state.userData || {};
    this.authorityList = authorityList
    this.$api.talentGetRoleId().then(res => {
      this.talentRole = res
    })
  },
  methods: {
    getTalent() {
      const params = this.params
      this.$api.talentGetTalentInfoList(params).then(res => {
        res.data.map(el => {
          let resultArray = [];
          if (el.certificateImgStr && el.certificateImgStr.includes(",")) {
            resultArray = el.certificateImgStr.split(",");
            el.certificateImg = resultArray
          } else {
            el.certificateImg = [el.certificateImgStr]
          }
        })
        this.talentData = res.data
        this.total = res.total
      })
    },
    reset() {
      this.params = this.$options.data(this).params
    },
    chooseTime(e) {
      this.params.startTime = dayjs(e[0]).format("YYYY-MM-DD");
      this.params.endTime = dayjs(e[1]).format("YYYY-MM-DD");
    },
    add() {
      this.$refs.addTalent.handleOpen()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getTalent()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getTalent()
    },
    deleteData(row) {
      MessageBox.alert(
          `确认删除: ${row.userId}?`,
          '删除信息',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'error',
            callback: action => {
              if (action === 'confirm') {
                this.$api.talentDeleteTalentInfoByUserId({userId: row.userId}).then(res => {
                  if (res === 1) {
                    this.$message.success("删除成功！");
                    this.getTalent();
                  } else {
                    this.$message.error("删除失败！");
                  }
                }).catch(error => {
                  this.$message.error("删除请求失败：" + error);
                });
              }
            }
          }
      );
    },
    receiveMessage(data) {
      if (data == 1) {
        this.getTalent()
      }
    },
    aduit(row) {
      this.$api.talentGetTalentInfo({userId: row.userId}).then(res => {
        this.$refs.aduitTalent.handleOpen(res)
      })
    },
    useTalent(row) {
      // console.log(row)
      this.$api.talentUpdateTalentInfoIsBanned({userId: row.userId, isBanned: row.isBanned}).then(res => {
        if (res == 1 && row.isBanned == '0') {
          this.$message.success("已启用！")
          this.getTalent()
        } else {
          this.$message.warning('已禁用！')
          this.getTalent()
        }
      })
    },
    addExperience(row) {
      this.$api.talentGetTalentInfo({userId: row.userId}).then(res => {
        this.projectDetail = res.projectDetail
        this.experienceDialog = true
        this.addUserId = res.userId
      })
    },
    deleteExperience(index) {
      this.projectDetail.splice(index, 1)
    },
    experienceAdd(val) {
      this.projectDetail.push({
        startTime: "",
        endTime: "",
        content: "",
        projectName: ""
      })
    },
    submitExperience() {
     let project= this.projectDetail.filter(obj => !obj.hasOwnProperty("projectId"))
      const data = {
        userId: this.addUserId,
        projectDetail: project
      }
      this.$api.talentInsertPCProjectDetail(data).then(res => {
        if (res == 1) {
          this.experienceDialog = false
          this.$message.success('更新成功！')
          this.getTalent()
        }
      })
    },
    edit(row){
      this.$api.talentGetTalentInfo({userId: row.userId}).then(res => {
        this.$refs.addTalent.handleOpen(res)
      })
    },
  }
}
</script>

<style scoped lang="less">
@import "../../assets/css/public.css";

.topSearch {
  display: flex;
  flex-wrap: wrap;

  div {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.content {
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

#container {
  width: 200px;
  height: 200px;
}
</style>